<div class="layui-fluid" id="VIEW-index" lay-title="文章列表">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header" style="padding: 8px 0 8px 17px;height: auto">
                    <div class="layui-row layui-col-space6">
                        <div class="layui-col-md12">
                            <div class="layui-row">
                                <div class="layui-col-md2">
                                    <label>标题：</label>
                                    <input type="text" name="title" autocomplete="off" class="layui-input" style="display: inline-block;width: 75%">
                                </div>
                                <div class="layui-col-md2">
                                    <label>作者：</label>
                                    <input type="text" name="author" autocomplete="off" class="layui-input" style="display: inline-block;width: 75%">
                                </div>
                                <div class="layui-col-md1">
                                    <div data-type="search" class="layui-btn search-btn layui-btn-sm layui-btn-success" style="width: 50%">筛选</div>
                                    <button data-type="add" class="layui-btn add-btn layui-btn-sm layui-btn-normal" style="width: 50%">添加</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="article-table" lay-filter="article-table"></table>

                    <script type="text/html" id="article-table-operate">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script data-th-inline="none" type="text/javascript">
    layui.use(['admin', 'element', 'helper', 'table', 'util'], function(admin, element, helper, table) {
        var $ = layui.jquery
        var $view = $('#VIEW-index')
        element.render('progress')
        table.render({
            elem: '[lay-filter="article-table"]',
            api: 'articleList',
            where: {},
            cellMinWidth: 80,
            cols: [[
                {field:'id', width:80, title: 'ID', sort: true, fixed: 'left'},
                {field:'title', title: '标题'},
                {field:'author', width:100, title: '作者'},
                {field:'category', width:100, title: '分类'},
                {field:'createTime', width:180, title: '创建时间'},
                {field:'publishTime', width:180, title: '发布时间'},
                {field:'state', width:100, title: '状态', templet: function(d) {
                    if (d.state == "1") {
                        return '<div><span class="layui-badge layui-bg-green">已发布</span></div>'
                    } else {
                        return '<div><span class="layui-badge layui-bg-danger">未发布</span></div>'
                    }
                }},
                {field:'tags', width:200, title: '标签', templet: function(d) {
                    if (d.tags != null && d.tags.length > 0) {
                        let html = '';
                        d.tags.forEach(t => {
                            html += '<span class="layui-badge layui-bg-blue">' + t.name + '</span>&nbsp;&nbsp;'
                        })
                        return html;
                    } else {
                        return ''
                    }
                }},
                {align:'center', fixed: 'right', toolbar: '#article-table-operate'}
            ]],
            page: true
        });

        //监听工具条
        table.on('tool(article-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                if (data.state != "1") {
                    admin.modal.warn('该文章还未发布')
                    return;
                }
                window.open('/article/' + data.id)
            } else if (obj.event === 'del') {
                layer.confirm('确定删除该文章？', function (index) {
                    admin.delete(api.article.base + data.id, {}, (res) => {
                        layer.msg(res.msg)
                        table.reload('article-table', {
                            page: {curr: 1}
                        })
                    })
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                admin.navigate(page.article.edit + data.id);
            }
        });

        var $ = layui.$, active = {
            search: function(){
                let data = {
                    title: $('input[name="title"]').val(),
                    author: $('input[name="author"]').val(),
                }
                table.reload('article-table', {
                    where: data,
                    page: {curr: 1}
                })
            },
            add: function () {
                admin.navigate(page.article.add)
            }
        }
        $('.layui-btn.add-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.layui-btn.search-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
